<template>
  <el-card>
    <el-form :inline="true" :disabled="disable">
      <!-- 一级 -->
      <el-select v-model="category1Id" @change="getCategory2">
        <el-option
          :value="case1.id"
          :label="case1.name"
          v-for="case1 in category1"
        />
      </el-select>
      <!-- 二级 -->
      <el-select v-model="category2Id" @change="getCategory3">
        <el-option
          :value="case2.id"
          :label="case2.name"
          v-for="case2 in category2"
        />
      </el-select>
      <el-select v-model="category3Id">
        <el-option
          :value="case3.id"
          :label="case3.name"
          v-for="case3 in category3"
        />
      </el-select>
    </el-form>
  </el-card>
</template>
<script lang="ts">
import { defineComponent } from "vue";

import { ElMessage } from "element-plus";
export default defineComponent({
  name: "CategorySelector",
});
</script>
<script setup lang="ts">
import { ref, watch} from "vue";
//引入store

import getCategoryStore from "@/stores/category";
import { storeToRefs } from "pinia";
//select选中的值

//三级联动
const categoryStore = getCategoryStore();
const {
  category1Id,
  category2Id,
  category3Id,
  category1,
  category2,
  category3,
} = storeToRefs(categoryStore);
//获取初始值
categoryStore.getCategory1();
// console.log("category1", category1);
const getCategory2 = () => {
  categoryStore.getCategory2();
  category2Id.value = "";
  category3Id.value = "";
};
//获取三级
const getCategory3 = () => {
  categoryStore.getCategory3();
  category3Id.value = "";
};
defineProps<{
  disable: boolean;
}>();
</script>
<style scoped></style>
